<template>
  <div class="box-shadow">
    <div class="big_title_style" style="font-size: 16px; margin-bottom: 20px">添加商品</div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="选择商品">
        <el-button size="small" @click="select">选择商品</el-button>
      </el-form-item>
      <el-form-item label="商品图片" prop="coverImgUrl">
        <div>
          <wechatImg
            :imageStr.sync="form.coverImgUrl"
            :imageurl.sync="imageurl"
          ></wechatImg>
          <img
            v-if="imageurl"
            style="width: 100px; height: 100px;border-radius: 4px"
            :src="imageurl"
          />
        </div>
        <div style="font-size: 14px; color: #999">图片大小不能超出300*300</div>
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input style="width: 500px" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="价格形式" prop="priceType">
        <el-radio-group v-model="form.priceType">
          <el-radio label="1">一口价</el-radio>
          <el-radio label="2">价格区间</el-radio>
          <el-radio label="3">显示折扣价</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="form.priceType == 1" label="商品价格" prop="price">
        <el-input v-model="form.price" clearable style="width: 200px" />
        <span style="margin: 0 5px"> 元 </span>
      </el-form-item>

      <el-form-item v-if="form.priceType == 2" label="价格区间" prop="price2">
        <el-input v-model="form.price" clearable style="width: 200px" />
        <span style="margin: 0 5px"> - </span>
        <el-input v-model="form.price2" style="width: 200px" />
      </el-form-item>

      <el-form-item v-if="form.priceType == 3" label="折扣区间" prop="price2">
        <el-input v-model="form.price" clearable style="width: 200px" />
        <span style="margin: 0 5px"> - </span>
        <el-input v-model="form.price2" style="width: 200px" />
      </el-form-item>
    </el-form>
    <div class="show_pro_code" v-if="codeImg">
        <img  style="width: 150px; height: 150px" :src="codeImg" />
        <div
          style="
            font-size: 12px;
            color: #c0c4cc;
            margin-top: 10px;
            font-weight: bold;
            text-align: center;
          "
        >
          扫描二维码预览商品详情
        </div>
      </div>
    <div class="Submit">
      <el-button @click="Submit" type="primary">提&nbsp;交</el-button>
    </div>
    <selectedCommodity
      v-if="open"
      @toCloseBox="toCloseBox"
      @multipleSelection="multipleSelection"
      :flag="open"
      ref="selTable"
    ></selectedCommodity>
  </div>
</template>

<script>
import { updateWaChatImg, addGood } from "@/api/applet/broadcastGood";
import { codeImg } from "@/api/product/info";
import selectedCommodity from "@/components/Activity/selectedCommodity";
import wechatImg from "@/components/ImageUpload/weChatBirectImg";
export default {
  data() {
    return {
      name: null,
      price: null,
      price2: null,
      codeImg: null,
      imageurl: null,
      productId: null,
      open: false,
      form: {
        priceType: "1",
        coverImgUrl: "",
        name: "",
        price: "",
        price2: "",
        productId: "",
      },
      imgform: {},
      selectedData: null,
      rules: {
        coverImgUrl: [
          {
            required: true,
            message: "图片不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "blur",
          },
          { min: 1, max: 16, message: '商品长度长度在 1 到 16 个字符', trigger: 'blur' }
        ],
        priceType: [
          {
            required: true,
            message: "形式不能为空",
            trigger: "blur",
          },
        ],
        price: [
          {
            required: true,
            message: "价格不能为空",
            trigger: "blur",
          },
        ],
        price2: [
          {
            required: true,
            message: "价格不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: {
    selectedCommodity,
    wechatImg,
  },
  created() {
    if (this.$route.query.data) {
      this.resForm();
    }
  },
  methods: {
    select() {
      this.open = true;
      this.$nextTick(() => {
        this.$refs["selTable"].greet(this.selectedData);
      });
    },
    resForm() {
      this.form = this.$route.query.data;
      this.form.priceType = String(this.form.priceType);
      // this.name = this.form.name;
      updateWaChatImg(this.form.coverImgUrl).then((response) => {
        this.form.coverImgUrl = response.data.media_id;
      });
      codeImg(this.form.url).then((response) => {
        this.codeImg = response.msg;
      });
    },
    Submit() {
      this.form.imageUrlStr = this.imageurl
        console.log(this.form);
        this.$refs["form"].validate((valid) => {
          if (valid) {
            addGood(this.form).then((response) => {
              this.$message({
                message: "提交成功",
                type: "success",
              });
              this.$router.push("/activity/broadcast/goods/not");
            });
          }
        });
    },
    multipleSelection(data) {
      this.imageurl = null;
      this.form.coverImgUrl = null;
      this.open = false;
      this.selectedData = data;
      this.form.productId = this.selectedData.productUid;
      this.imageurl = this.selectedData.carouselImgOne;
      this.form.name = this.selectedData.productName;
      this.form.price = this.selectedData.retailPriceStr;
      this.form.url = this.selectedData.productUid;
      updateWaChatImg(this.selectedData.carouselImgOne).then((response) => {
        this.form.coverImgUrl = response.data.media_id;
      });
      codeImg(this.form.url).then((response) => {
        this.codeImg = response.msg;
      });
    },
    toCloseBox() {
      this.open = false;
    },
  },
};
</script>

<style scoped>
.box-shadow {
  border: 1px solid #eee;
  width: 1000px;
  height: auto;
  margin: 50px auto 0;
  background-color: #fff;
  padding: 30px 30px 50px 30px;
  border-radius: 10px;
  position: relative;
}
.show_pro_code {
  position: absolute;
  top: 40px;
  right: 40px;
}
.Submit {
  display: flex;
  justify-content: center;
}
</style>
